<!-- 
此页面废弃 
 -->
<template>
	<view>
		<page-head :title="'附近驾校'" :headtype="2"></page-head>
		<view class="fjlist flex marginAuto">
			<view class="drivingeach" v-for="(item, index) in drivingdata" :key="index" @click="apifun.navigate('')">
				<view class="drivingeachimg">
					<view class="drivingeachjl">
						<view class="drivingeachjlbg"></view>
						<view class="drivingeachjlmsg flex">
							<uv-icon style="margin-top:5rpx;" name="map" color="#fff" size="12"></uv-icon>
							<text>{{ item.distance }}km</text>
						</view>
					</view>
					<image class="drivingeachimgimg" :src="apifun.URLimg+item.img" mode=""></image>
				</view>
				<view class="drivingeachtext">
					<view class="drivingeachtext-name ellipsis01">{{ item.name }}</view>
					<view class="drivingeachtext-doc ellipsis01">{{ item.intro }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun: this.apifun,
				page:1,
				lng:'',
				lat:'',
				drivingdata:[]
			};
		},
		onLoad(option) {
			this.lng = option.lng;
			this.lat = option.lat;
			this.initData()
		},
		methods: {
			initData(){
				let sendData = {
					lng:this.lng,
					lat:this.lat,
					page:this.page,
					limit:this.apifun.limit
				}
				this.apifun.unirequest('/api/index/getNearbySchoolList','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--
							return false
						}
						this.drivingdata = [...this.drivingdata,...datas.data];
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.drivingdata = [];
			this.initData();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initData()
		},
	};
</script>

<style scoped lang="scss">
	.fjlist{
		width: 690rpx;
		justify-content:space-between;
		flex-wrap: wrap;
	}
	.drivingeach{
		margin-top:20rpx;
		width:330rpx;
		border-radius:20rpx;
		box-shadow:0rpx 0rpx 16rpx #f1ebeb;
		background: #fff;
		.drivingeachimg{
			position: relative;
			width: 330rpx;
			height: 290rpx;
			.drivingeachjl{
				position: absolute;
				bottom: 10rpx;
				left: 10rpx;
				z-index: 10;
				height: 40rpx;
				padding:0 10rpx;
				.drivingeachjlbg{
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 40rpx;
					z-index: 10;
					background-color:#000000;
					opacity: .5;
					border-radius: 100rpx;
				}
				.drivingeachjlmsg{
					position: relative;
					z-index: 11;
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #fff;
				}
			}
			.drivingeachimgimg{
				width: 330rpx;
				height: 290rpx;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
			}
		}
		.drivingeachtext{
			flex: 1;
			padding: 0 20rpx;
			.drivingeachtext-name{
				height: 60rpx;
				line-height: 60rpx;
				color:#222222;
				font-size:28rpx;
			}
			.drivingeachtext-doc{
				height: 60rpx;
				line-height: 60rpx;
				color:#666666;
				font-size:24rpx;
			}
			
		}
	}
</style>